<template>
  <div class="mui-content ">
    <!--<heade background='' title='我的浏览' v-on:goBack="goBack($event)"></heade>-->
    <div class="search">
      <input type="text" placeholder="输入资源名称或者关键词" v-on:keyup.enter="submit" v-model="search">
      <div class="mui-icon mui-icon-search" @click="submit"></div>
    </div>
    <div class="noResource" v-show="imgShow">

      <div><img src="../assets/img/3aa41c17c34735172a543eed6289129c.png" alt=""></div>
      <p>暂无资源</p>
    </div>
    <RecyclerView ></RecyclerView>
      <div  class="contentWrapper" ref="contentWrap">
      <div class="contentWrapper1">
        <div class="eyesWrapper" v-for="(item,index) in data" :key="index">
          <div class="content ">
            <div class="leftContent  mui-left"><img :src=item.SUrl></div>
            <div class="rightContent  mui-right">
              <div  class="title" @click="ResourceDetail(data[index])">{{item.Name}}</div>
              <div class="text" ><span>作者:</span><span>{{item.Author}}</span></div>
              <div class="text"><span>上传时间:</span><span>{{item.CDate}}</span></div>
              <div class="text"><span>资源类型:</span><span>{{item.ResourceType}}</span></div>
              <div class="text">
                <div class="starContent">
                  <div class="info same">评分:</div>
                  <Star class="star" :score=data[index].EvaluatValue>
                  </Star>
                </div>
              </div>
            </div>

          </div>
          <div class="foot mui-text-center">
            <div class="foot-title">收藏数:&nbsp{{item.CollectNumber}}</div>
            <div class="foot-title">点击数:&nbsp{{item.ClickNumber}}</div>
            <div class="foot-title">评价数:&nbsp{{item.EvaluatNumber}}</div>
          </div>
        </div>
        <div class="fresh" v-show="up" style="height: 100px;line-height: 100px;margin-top: 0px">
          <Loading v-if="showmeLoad"></Loading>
          <div v-if="!showmeLoad" class="mui-text-center" style="color: grey;line-height: 50px;height: 20px">没有更多...</div>
        </div>
      </div>
    </div>


    <Prompt
      title="错误"
      msg="登陆过期,请重新登录"
      confirm="确定"
      v-on:confirm1="confirm1($event)"
      v-if="mistake"
    >
    </Prompt>

  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  import Star from '@components/common/Star'
  import Prompt from '@components/common/Prompt'
  import BScroll from 'better-scroll'
  import Loading from '@components/common/Loading'
  // import MiItem from '../components/scrollTest/Item.vue'
  // import MiTomstone from '../components/scrollTest/Tombstone.vue'
  export default {
    components: {
      heade,
      Star,
      Prompt,
      Loading
    },
    data() {
      return {
        showmeLoad: true,
        // MiItem,
        // MiTomstone,
        UserId: '',
        // score:3,
        mistake: false,
        data: [],
        isCollect: false,
        contentScroll: {},
        scroll: {},
        search: '',
        imgShow: false,
        Page: 1,
        Pages: null,
        endOfScreen: false,
        up: false,
      }
    },

    created() {
      let me = this;
      // window.onscroll=function(){
      //   //me.endOfScreen=me.scrollCheck()
      // };

      me.$Global.zcServer.Post({
        IsNeedLogin: 'true',
        Paras: {
          UserId: me.$Global.UserId,
          Name: 'Vue_CourseResource',
          Action: "Ext_HistoryList",
          Data: {
            Page: me.Page,
            queryStr: ''
          }
        },
        Callback: me.cb_myEyes,
        Scope: me
      });
    },
    computed: {},
    // watch:{
    //   endOfScreen(newValue){
    //     alert(88)
    //     let me=this
    //     if(newValue){
    //       me.$Global.zcServer.Post({
    //         IsNeedLogin:'true',
    //         Paras:{
    //           UserId:me.$Global.UserId ,
    //           Name:'Vue_CourseResource',
    //           Action:"Ext_HistoryList",
    //           Data:{
    //             Page:2,
    //             queryStr:''
    //           }
    //         },
    //         Callback:me.cb_myEyes,
    //         Scope:me
    //       });
    //     }
    //   }
    // },
    methods: {
      // scrollCheck(){
      //   let winHeight=window.scrollY+window.innerHeight;
      //   return winHeight===document.documentElement.offsetHeight
      // },
      changeCollect() {
        // alert(4)

      },
      goBack() {

        this.$router.push('/Index')
      },
      ResourceDetail(detail) {
        let me = this;
        let data = {};
        data.SN = detail.SN;
        data.TS = detail.TS;
        me.$store.commit('setSN', data);
        // sessionStorage.setItem("DetailSN", data.SN);
        sessionStorage.setItem("DetailSN", JSON.stringify(data));
        me.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras: {
            UserId: me.$Global.UserId,
            Name: 'Vue_CourseResource',
            action: "Ext_ResourceStoreClickNumber",
            Data: {
              IsCollect: me.isCollect,
              SN: data.SN,
            }
          },
          Callback: me.cb_ClickNumber,
          Scope: me,
        });
        this.$router.push("ResourceDetail")
      },
      submit() {
        let me = this;
        let Page = 1;
        let queryStr = me.search;
        me.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras: {
            UserId: me.$Global.UserId,
            Name: 'Vue_CourseResource',
            action: "Ext_HistoryList",
            Data: {
              Page: Page,
              queryStr: me.search,
            }
          },
          Callback: me.cb_HistoryList,
          Scope: me,
        });

      },

      /*上拉加载更多*/
      BS() {
        this.$nextTick(() => {
          if (!this.$refs.contentWrap) {
            return;
          }else {
            // better-scroll的初始化
            this.scroll = new BScroll(this.$refs.contentWrap, {
              probeType: 3,
              click: true,
              scrollX: false,
              bounce: false
            });
          }

          console.log('最大高度',this.scroll.maxScrollY);
          this.scroll.on('scroll', pos => {
            //console.log("判断下拉的高度");
            //console.log(pos.y);
            //如果上拉超过30px 就显示下拉刷新的文字
            if (pos.y < this.scroll.maxScrollY + 50) {
              this.up = true
            } else {
              this.up = false
            }
          });
          //touchEnd 通过这个方法来监听上拉
          this.scroll.on('touchEnd', pos => {
            // 下拉动作
            if (pos.y < this.scroll.maxScrollY +100 ) {
              this.Page++
              if (this.Page > this.Pages) {
                this.Page = this.Pages
                this.showmeLoad = false
                return
              }
              this.scroll.refresh();
              console.log('上啦加载成功');
              let me = this;
              me.$Global.zcServer.Post({
                IsNeedLogin: 'true',
                Paras: {
                  UserId: me.$Global.UserId,
                  Name: 'Vue_CourseResource',
                  Action: "Ext_HistoryList",
                  Data: {
                    Page: me.Page,
                    queryStr: ''
                  }
                },
                Callback: me.cb_myEyes,
                Scope: me
              });
              me.up = false;

            }
            // if(this.scroll.maxScrollY > pos.y + 10) {
            console.log('加载更多');
            // console.log(this.scroll.maxScrollY);
            //使用refresh 方法 来更新scroll  解决无法滚动的问题
            this.scroll.refresh();
            // }
            //console.log(this.scroll.maxScrollY + '总距离----下拉的距离' + pos.y);
          });
          console.log(this.scroll.maxScrollY);
        })
      },
      /*回调函数*/
      /*进入我的浏览返回函数*/
      cb_myEyes(resJson, scope) {
        console.log('浏览数据',resJson);
        this.Pages = resJson.data.Pages
      if(this.page==1){
        this.data=resJson.data.Data
      }
        else  if (this.Page <= this.Pages) {
          this.data.push.apply(this.data, resJson.data.Data);
        this.scroll.refresh();
        }

      },
      /*点击资源返回函数*/
      cb_ClickNumber(resJson, scope) {
        console.log('點擊', resJson);
      },
      cb_HistoryList(resJson, scope) {
        console.log('查询', resJson);
        if (resJson.data.Data.length == 0) {
          this.data = resJson.data.Data;
          this.imgShow = true;

        } else {
          this.data = resJson.data.Data;
          this.imgShow = false;

        }
      }
    },
    mounted() {
      this.showme = false;
      setTimeout(() => {
        this.BS();
      }, 100);

    },

  }
</script>
<style scoped>

.mui-content .eyesWrapper{
  /*margin-top: 10px;*/
}
  .mui-content .search{
    width: 100%;
    /*margin: 2% 0;*/
    position: relative;
  }
  .mui-content .search input{
    width: 100%;
    border: none;
    outline: none;
  }
  .mui-content .search input::-webkit-input-placeholder {
    font-size: 13px;
    text-align: left;
  }
.mui-content .contentWrapper{
  position: absolute;
  top: 3.125rem;
  bottom: 0;
  width: 100%;
  /*height: 82vh;*/
  overflow: hidden;
}
  .mui-content .search .mui-icon{
    position: absolute;
    width: 25px;
    height: 25px;
    right: 10px;
    top: 8px;
    color:rgba(93, 194, 240, 1);
    /*margin-right: 20px;*/
  }
  .mui-content .content{
    display: flex;
    background-color: white;
    padding-left: 3%;
    margin-top: 10px;
  }
  .mui-content .content .leftContent{
    width: 40%;
  }
  .mui-content .content .leftContent img{
    width: 130px;
    height: 100px;
    margin-top: 15%;
  }
  .mui-content .content .rightContent{
    width: 60%;

  }
  .mui-content .content .rightContent .title{
    height: 40px;
    line-height: 50px;
    -webkit-line-clamp:1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color:rgba(93, 194, 240, 1);
  }
  .mui-content .content .rightContent .text *{
    font-size: 0.8rem;
    color: #8f8f94;
    padding-right:6px;
  }
  .mui-content .content .rightContent .text .starContent{
    float: left;
  }
  .mui-content .content .rightContent .text .starContent *{
    display: inline-block;
  }
  .mui-content .content .rightContent .text .starContent .same{
    padding-bottom: 10px;
    padding-right: 2px;
  }
  .mui-content .foot{
    width: 100%;
    height: 40px;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    background-color: white;
    display: flex;
    color: #8f8f94;
  }
  .mui-content .foot .foot-title{
    height: 40px;
    line-height: 40px;
    flex: 1;
    border-right: 1px solid gainsboro;
    font-size: 0.9rem;
  }
  .mui-content .foot .foot-title:last-child{
    border-right: none;
  }
/*查询失败提示*/
.mui-content .noResource{
  width: 100%;
  display: flex;
  align-items:center ;
  justify-content: center;
  flex-direction: column
}
.mui-content .noResource img{
  height: 150px;
  width: 150px;

}
</style>
